import { useEffect, useState } from 'react';
import { Typography, Row, Col, message, Button } from 'antd';
import styles from './index.module.scss'
import { useLocation } from 'react-router-dom';
import { ec2Detail } from '@/service'
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';



export default (props) => {
    const [messageApi, contextHolder] = message.useMessage();
    const { state } = useLocation();
    const { Title, Text } = Typography;
    const [billData, setDetailData] = useState({});
    const { t, i18n } = useTranslation();
    const navigate = useNavigate();
    const getDetailInfo = () => {
        ec2Detail(state?.id).then(res => {
            if (res.code == 0) {
                setDetailData(res?.data);
            } else {
                messageApi.open({
                    type: 'error',
                    content: res?.message,
                });
            }
        }).catch(e => {
            messageApi.open({
                type: 'error',
                content: e?.message,
            });
        });
    }
    const formatState = (state) => {
        switch (state) {
            case 0:
                return 'Starting';
            case 1:
                return 'Running';
            case 2:
                return 'Stopping';
            case 3:
                return 'Stopped';
            case 4:
                return 'Terminating';
            case 5:
                return 'Terminated';
            default:
                return 'Initial';
        }
    }
    const goBack = () => {
        navigate('/instance');
    }

    const renderDetailRow = (label1, value1, label2, value2) => {
        const unitMap = {
            'Core Capacity': 'G',
            'Volume capacity': 'G',
        };
        const getValueWithUnit = (label, value) => {
            const unit = unitMap[label];
            return unit && value ? `${value} ${unit}` : value;
        };
        return (
            <Row style={{ marginBottom: '16px' }}>
                <Col span={12}>
                    <Text className={styles.labelText}>{label1}:</Text> <Text strong>{value1}</Text>
                </Col>
                <Col span={12}>
                    <Text className={styles.labelText}>{label2}:</Text> <Text strong>
                        {label2 === 'Status' ? formatState(value2) : getValueWithUnit(label2, value2)}
                    </Text>
                </Col>
            </Row>
        );
    };
    useEffect(() => {
        if (state && state.id) {
            getDetailInfo();
        }
    }, [i18n.language]);
    return (
        <div className='page-container'>
            <div className={styles.content}>
                <div className={styles.billingdetailscontainer}>
                    <div style={{ textAlign: 'right', marginBottom: '20px' }}>
                        <Button type='primary' className='custom-btn-back' onClick={goBack} >{t('common.goback.text')}</Button>

                    </div>

                    <div className={styles.billingdetailsheader}>
                        <Text className={styles.text}>{t('menu.containerDetail.title')}</Text>
                    </div>

                    <div className={styles.billingcontent}>
                        {/* <Row justify="space-between" style={{ width: '80%', margin: '0 auto' }}>
                            <Col>
                                <Title level={4} className={styles.title}>Bill Overview:</Title>
                            </Col>
                            <Col>
                                <Text className={styles.billingsummary}>Bill Summary (USD):</Text> <Text className={styles.summaryvalue}>{billData.summary}</Text>
                            </Col>
                        </Row> */}
                        <div className={styles.topBox}>
                            {renderDetailRow(t('menu.containerDetail.lable.containerID'), billData.instanceId, t('menu.containerDetail.lable.status'), billData.state)}
                            {renderDetailRow(t('menu.containerDetail.lable.address'), billData.publicIpv4, t('menu.containerDetail.lable.platform'), billData.platform)}
                            {renderDetailRow(t('menu.containerDetail.lable.imagefile'), billData.amiName, t('menu.containerDetail.lable.reelType'), billData.reelType)}
                            {renderDetailRow(t('menu.containerDetail.lable.coreArchitecture'), billData.coreArchitecture, t('menu.containerDetail.lable.coreQuantity'), billData.coreQuantity)}
                            {renderDetailRow(t('menu.containerDetail.lable.cpuUtilization'), billData.cpuUtilization, t('menu.containerDetail.lable.coreCapacity'), billData.coreCapacity)}
                            {renderDetailRow(t('menu.containerDetail.lable.diskReadOps'), billData.diskReadOps, t('menu.containerDetail.lable.diskWriteOps'), billData.diskWriteOps)}
                            {renderDetailRow(t('menu.containerDetail.lable.diskReadBytes'), billData.diskReadBytes, t('menu.containerDetail.lable.diskWriteBytes'), billData.diskWriteBytes)}
                            {renderDetailRow(t('menu.containerDetail.lable.instanceType'), billData.instanceType, t('menu.containerDetail.lable.ebsCapacity'), billData.ebsCapacity)}
                            {renderDetailRow(t('menu.containerDetail.lable.networkIn'), billData.networkIn, t('menu.containerDetail.lable.networkOut'), billData.networkOut)}
                        </div>
                    </div>
                </div>
            </div>
            {contextHolder}
        </div>
    );
};
